<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { diaryApi, photoApi, type Diary } from '../../services/api'
import RichTextEditor from '../../components/RichTextEditor.vue'

// 日记数据
const diaries = ref<Diary[]>([])

const newDiary = reactive({
  title: '',
  content: '',
  mood: 'happy',
  tags: [] as string[],
  media: [] as {type: string, url: string}[]
})

const isEditing = ref(false)
const editingId = ref<number | null>(null)
const isLoading = ref(false)
const error = ref<string | null>(null)
const searchQuery = ref('')

const currentDateTime = ref('')
const newTag = ref('')
const newMediaUrl = ref('')

// 添加标签筛选相关变量
const tagFilter = ref('all')
const availableTags = computed(() => {
  const tags = new Set<string>()
  diaries.value.forEach(diary => {
    if (diary.tags) {
      diary.tags.forEach(tag => tags.add(tag))
    }
  })
  return Array.from(tags)
})

// 添加新的响应式变量用于文件上传
const mediaFile = ref<File | null>(null)
const mediaPreview = ref<string | null>(null)

interface Mood {
  value: string;
  label: string;
  color: string;
  emoji: string;
}

const moods: Mood[] = [
  { value: 'happy', label: '开心', color: '#FFD700', emoji: '😊' },
  { value: 'excited', label: '兴奋', color: '#FF6B6B', emoji: '🤩' },
  { value: 'calm', label: '平静', color: '#48D1CC', emoji: '😌' },
  { value: 'sad', label: '伤心', color: '#6495ED', emoji: '😢' },
  { value: 'angry', label: '生气', color: '#FF4500', emoji: '😠' }
]

// 更新当前时间
const updateDateTime = () => {
  const now = new Date()
  currentDateTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-').replace(',', '')
}

// 获取所有日记
const fetchDiaries = async () => {
  try {
    isLoading.value = true
    error.value = null
    diaries.value = await diaryApi.getAll()
  } catch (err) {
    console.error('获取日记失败:', err)
    let errorMessage = '获取日记失败'
    
    if (err instanceof Error) {
      // 网络错误
      if (err.message.includes('Failed to fetch') || err.message.includes('fetch')) {
        errorMessage = '无法连接到服务器，请确保后端服务正在运行'
      } else {
        errorMessage = err.message
      }
    } else if (typeof err === 'string') {
      errorMessage = err
    }
    
    error.value = errorMessage
    window.showNotification(errorMessage, 'error')
  } finally {
    isLoading.value = false
  }
}

// 保存日记
const saveDiary = async () => {
  if (!newDiary.title.trim()) {
    window.showNotification('请填写标题', 'error')
    return
  }
  
  if (!newDiary.content.trim()) {
    window.showNotification('请填写内容', 'error')
    return
  }
  
  try {
    isLoading.value = true
    if (isEditing.value && editingId.value) {
      // 更新现有日记
      const updatedDiary = await diaryApi.update(editingId.value, {
        title: newDiary.title,
        content: newDiary.content,
        mood: newDiary.mood,
        tags: newDiary.tags,
        media: newDiary.media
      })
      
      // 更新本地数据
      const index = diaries.value.findIndex((d: Diary) => d.id === editingId.value)
      if (index !== -1) {
        diaries.value[index] = updatedDiary
      }
      
      // 显示成功通知
      window.showNotification('日记更新成功！', 'success')
    } else {
      // 创建新日记
      const createdDiary = await diaryApi.create({
        title: newDiary.title,
        content: newDiary.content,
        mood: newDiary.mood,
        tags: newDiary.tags,
        media: newDiary.media
      })
      
      diaries.value.unshift(createdDiary)
      
      // 显示成功通知
      window.showNotification('日记保存成功！', 'success')
    }
    
    // 重置表单
    resetForm()
  } catch (err) {
    console.error('保存日记失败:', err)
    let errorMessage = '保存日记失败'
    
    if (err instanceof Error) {
      // 网络错误
      if ('message' in err) {
        if (err.message.includes('Failed to fetch') || err.message.includes('fetch')) {
          errorMessage = '无法连接到服务器，请确保后端服务正在运行'
        } else {
          errorMessage = err.message
        }
      }
    } else if (typeof err === 'string') {
      errorMessage = err
    }
    
    window.showNotification(errorMessage, 'error')
  } finally {
    isLoading.value = false
  }
}

// 编辑日记
const editDiary = (diary: Diary) => {
  isEditing.value = true
  editingId.value = diary.id || null
  newDiary.title = diary.title
  newDiary.content = diary.content
  newDiary.mood = diary.mood
  newDiary.tags = diary.tags || []
  newDiary.media = diary.media || []
  
  // 滚动到表单顶部
  document.querySelector('.diary-form')?.scrollIntoView({ behavior: 'smooth' })
}

// 删除日记
const deleteDiary = async (id: number) => {
  if (confirm('确定要删除这篇日记吗？')) {
    try {
      await diaryApi.delete(id)
      diaries.value = diaries.value.filter((d: Diary) => d.id !== id)
      window.showNotification('日记删除成功！', 'success')
    } catch (err) {
      console.error('删除日记失败:', err)
      let errorMessage = '删除日记失败'
        
      if (err instanceof Error) {
        // 网络错误
        if (err.message.includes('Failed to fetch') || err.message.includes('fetch')) {
          errorMessage = '无法连接到服务器，请确保后端服务正在运行'
        } else {
          errorMessage = err.message
        }
      } else if (typeof err === 'string') {
        errorMessage = err
      }
        
      window.showNotification(errorMessage, 'error')
    }
  }
}

// 重置表单
const resetForm = () => {
  isEditing.value = false
  editingId.value = null
  newDiary.title = ''
  newDiary.content = ''
  newDiary.mood = 'happy'
  newDiary.tags = []
  newDiary.media = []
  newMediaUrl.value = ''
}

// 添加标签
const addTag = () => {
  if (newTag.value.trim() && !newDiary.tags.includes(newTag.value.trim())) {
    newDiary.tags.push(newTag.value.trim())
    newTag.value = ''
  }
}

// 删除标签
const removeTag = (tag: string) => {
  newDiary.tags = newDiary.tags.filter(t => t !== tag)
}

// 添加媒体（本地文件）
const addMediaFromFile = async () => {
  if (!mediaFile.value) {
    window.showNotification('请先选择文件', 'error')
    return
  }
  
  try {
    const formData = new FormData()
    formData.append('photo', mediaFile.value)
    formData.append('user_id', '1') // 实际项目中应该从认证信息中获取
    
    // 上传文件
    const response: any = await photoApi.upload(formData)
    
    // 根据文件类型确定媒体类型
    const type = mediaFile.value.type.startsWith('image/') ? 'image' : 'video';
    
    // 添加到日记媒体列表
    newDiary.media.push({ 
      type, 
      url: `http://localhost:3001/${response.file_path}` 
    })
    
    // 重置文件选择状态
    mediaFile.value = null
    mediaPreview.value = null
    window.showNotification('媒体文件上传成功！', 'success')
  } catch (err) {
    console.error('上传失败:', err)
    let errorMessage = '上传失败'
    
    if (err instanceof Error) {
      // 网络错误
      if (err.message.includes('Failed to fetch') || err.message.includes('fetch')) {
        errorMessage = '无法连接到服务器，请确保后端服务正在运行且网络连接正常'
      } else {
        errorMessage = err.message
      }
    } else if (typeof err === 'string') {
      errorMessage = err
    }
    
    window.showNotification(errorMessage, 'error')
  }
}

// 处理文件选择
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  
  if (file) {
    mediaFile.value = file
    // 创建预览URL
    mediaPreview.value = URL.createObjectURL(file)
    // 选择文件后自动上传
    addMediaFromFile()
  }
}

// 删除媒体
const removeMedia = (index: number) => {
  newDiary.media.splice(index, 1)
}

// 筛选后的日记
const filteredDiaries = computed(() => {
  let result = diaries.value
  
  // 按标签筛选
  if (tagFilter.value !== 'all') {
    result = result.filter(diary => 
      diary.tags && diary.tags.includes(tagFilter.value)
    )
  }
  
  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(diary => 
      diary.title.toLowerCase().includes(query) || 
      diary.content.toLowerCase().includes(query) ||
      (diary.tags && diary.tags.some(tag => tag.toLowerCase().includes(query)))
    )
  }
  
  return result
})

// 组件挂载时获取日记
onMounted(() => {
  fetchDiaries()
  updateDateTime()
  setInterval(updateDateTime, 1000)
})
</script>

<template>
  <div class="diary-container">
    <h1 class="page-title">我的日记</h1>
    
    <!-- 错误信息 -->
    <div v-if="error" class="error-message neo-brutalist">
      {{ error }}
    </div>
    
    <div class="diary-content">
      <!-- 日记表单（上部分） -->
      <div class="diary-form neo-brutalist">
        <h2>{{ isEditing ? '编辑日记' : '写日记' }}</h2>
        
        <form @submit.prevent="saveDiary">
          <div class="form-group">
            <label for="title">标题 (最多60字符)</label>
            <input 
              id="title"
              v-model="newDiary.title"
              type="text" 
              placeholder="输入日记标题"
              :disabled="isLoading"
              class="neo-brutalist-input"
              maxlength="60"
            />
            <div class="char-count">{{ newDiary.title.length }}/60</div>
          </div>
          
          <div class="form-group">
            <label>当前时间</label>
            <div class="current-time">{{ currentDateTime }}</div>
          </div>
          
          <div class="form-group">
            <label for="mood">心情</label>
            <div class="mood-selector">
              <button
                v-for="mood in moods"
                :key="mood.value"
                type="button"
                class="mood-option neo-brutalist"
                :class="{ selected: newDiary.mood === mood.value }"
                @click="newDiary.mood = mood.value"
              >
                <span class="mood-emoji">{{ mood.emoji }}</span>
                <span class="mood-label">{{ mood.label }}</span>
              </button>
            </div>
          </div>
          
          <div class="form-group">
            <label for="content">内容 (支持Markdown)</label>
            <RichTextEditor
              id="content"
              v-model="newDiary.content"
              :disabled="isLoading"
            />
          </div>
          
          <div class="form-group">
            <label>标签</label>
            <div class="tags-input">
              <div class="tags-list">
                <span
                  v-for="tag in newDiary.tags"
                  :key="tag"
                  class="tag neo-brutalist"
                >
                  {{ tag }}
                  <button
                    type="button"
                    class="remove-tag"
                    @click="removeTag(tag)"
                  >
                    ×
                  </button>
                </span>
              </div>
              <div class="add-tag">
                <input
                  v-model="newTag"
                  type="text"
                  placeholder="输入标签，按回车添加"
                  @keyup.enter="addTag"
                  class="neo-brutalist-input tag-input"
                />
                <button
                  type="button"
                  @click="addTag"
                  class="add-tag-btn neo-brutalist btn btn--secondary"
                >
                  添加
                </button>
              </div>
            </div>
          </div>
          
          <div class="form-group">
            <label>媒体</label>
            <div class="media-section">
              <div class="media-preview" v-if="newDiary.media.length > 0">
                <div
                  v-for="(media, index) in newDiary.media"
                  :key="index"
                  class="media-item neo-brutalist"
                >
                  <img v-if="media.type === 'image'" :src="media.url" :alt="'图片' + (index + 1)" />
                  <video v-else-if="media.type === 'video'" :src="media.url" controls></video>
                  <button
                    type="button"
                    class="remove-media"
                    @click="removeMedia(index)"
                  >
                    ×
                  </button>
                </div>
              </div>
              <div class="media-upload">
                <!-- 本地文件上传区域 -->
                <div class="file-upload-area" v-if="!mediaPreview">
                  <input 
                    type="file" 
                    id="media-upload" 
                    accept="image/*,video/*" 
                    @change="handleFileSelect"
                    style="display: none;"
                  />
                  <label for="media-upload" class="upload-button neo-brutalist btn btn--primary">
                    选择文件
                  </label>
                  <p class="upload-instruction">支持图片和视频文件</p>
                </div>
                
                <!-- 文件预览区域 -->
                <div class="preview-area" v-else>
                  <img v-if="mediaPreview && mediaFile?.type.startsWith('image')" :src="mediaPreview" alt="预览图片" class="preview-image" />
                  <video v-else-if="mediaPreview && mediaFile?.type.startsWith('video')" :src="mediaPreview" controls class="preview-video"></video>
                  <div class="preview-actions">
                    <button @click="mediaPreview = null" class="reset-button neo-brutalist btn btn--danger">重新选择</button>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
          
          <div class="form-actions">
            <button 
              type="submit" 
              class="save-button neo-brutalist btn btn--primary"
              :disabled="isLoading"
              :class="{ 'btn--disabled': isLoading }"
            >
              {{ isLoading ? '保存中...' : (isEditing ? '更新日记' : '保存日记') }}
            </button>
            
            <button 
              v-if="isEditing" 
              type="button" 
              class="cancel-button neo-brutalist btn btn--danger"
              @click="resetForm"
              :disabled="isLoading"
            >
              取消
            </button>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 日记历史部分（下部分） -->
    <div class="diary-history-section">
      <div class="list-header neo-brutalist">
        <h2>日记历史</h2>
        <div class="list-controls">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索日记..."
            class="neo-brutalist-input search-input"
          />
          <select
            v-model="tagFilter"
            class="neo-brutalist-input mood-filter"
          >
            <option value="all">所有标签</option>
            <option
              v-for="tag in availableTags"
              :key="tag"
              :value="tag"
            >
              {{ tag }}
            </option>
          </select>
        </div>
      </div>
      
      <div v-if="isLoading && diaries.length === 0" class="loading">
        加载中...
      </div>
      
      <div v-else-if="filteredDiaries.length === 0" class="no-diaries">
        {{ searchQuery || tagFilter !== 'all' ? '没有找到匹配的日记' : '还没有写过日记，快来写一篇吧！' }}
      </div>
      
      <!-- 手札风格的日记列表 -->
      <div class="scrapbook-container">
        <transition-group name="diary-list" tag="div" class="scrapbook-pages">
          <div 
            v-for="diary in filteredDiaries" 
            :key="diary.id" 
            class="scrapbook-page"
          >
            <div class="page-content neo-brutalist">
              <div class="page-header">
                <h3>{{ diary.title }}</h3>
                <div class="diary-meta">
                  <span class="mood neo-brutalist">{{ moods.find(m => m.value === diary.mood)?.emoji }} {{ moods.find(m => m.value === diary.mood)?.label }}</span>
                  <span class="date neo-brutalist">{{ diary.created_at ? new Date(diary.created_at).toLocaleDateString() : '' }}</span>
                </div>
              </div>
              
              <div class="page-tags" v-if="diary.tags && diary.tags.length > 0">
                <span
                  v-for="tag in diary.tags"
                  :key="tag"
                  class="tag neo-brutalist"
                >
                  {{ tag }}
                </span>
              </div>
              
              <div class="page-body">
                <div v-html="diary.content"></div>
              </div>
              
              <div class="page-media" v-if="diary.media && diary.media.length > 0">
                <div
                  v-for="(media, index) in diary.media"
                  :key="index"
                  class="media-preview"
                >
                  <img v-if="media.type === 'image'" :src="media.url" :alt="'图片' + (index + 1)" />
                  <video v-else-if="media.type === 'video'" :src="media.url" controls></video>
                </div>
              </div>
              
              <div class="page-actions">
                <button 
                  class="edit-button neo-brutalist btn btn--secondary"
                  @click="editDiary(diary)"
                >
                  编辑
                </button>
                <button 
                  class="delete-button neo-brutalist btn btn--danger"
                  @click="deleteDiary(diary.id!)"
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.diary-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
}

.diary-content {
  margin-bottom: 2rem;
}

/* 手札书页样式 */
.scrapbook-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 20px 0;
}

.scrapbook-page {
  width: 300px;
  height: 400px;
  perspective: 1000px;
  position: relative;
}

.page-content {
  width: 100%;
  height: 100%;
  background-color: var(--neo-brutalist-white);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 5px 5px 0 0 var(--neo-brutalist-black);
  position: relative;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--neo-brutalist-black);
}

.page-content:hover {
  transform: rotate(2deg) translateY(-5px);
  box-shadow: 8px 8px 0 0 var(--neo-brutalist-black);
}

.page-header h3 {
  margin: 0 0 10px 0;
  font-size: 1.3rem;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--neo-brutalist-black);
  padding-bottom: 5px;
}

.diary-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: #000;
  margin-bottom: 10px;
}

.mood {
  background-color: var(--neo-brutalist-white);
  padding: 3px 8px;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
}

.date {
  background-color: var(--neo-brutalist-white);
  padding: 3px 8px;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
}

.page-tags {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag {
  background-color: var(--neo-brutalist-white);
  padding: 3px 8px;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
  display: inline-block;
  font-size: 0.75rem;
  color: #000;
}

.page-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  margin: 10px 0;
  line-height: 1.5;
  font-size: 0.9rem;
  color: #000;
}

.page-body:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(transparent, var(--neo-brutalist-white));
}

.page-body :deep(img) {
  max-width: 100%;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
  margin: 5px 0;
}

.page-body :deep(p) {
  margin: 5px 0;
  font-size: 0.9rem;
}

.page-body :deep(h1),
.page-body :deep(h2),
.page-body :deep(h3) {
  color: #000;
  border-bottom: 1px solid var(--neo-brutalist-black);
  padding-bottom: 3px;
  font-size: 1.1rem;
  margin: 8px 0 5px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.page-media {
  margin: 10px 0;
  max-height: 80px;
  overflow-y: auto;
}

.media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.media-preview img,
.media-preview video {
  max-width: 80px;
  max-height: 80px;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.page-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--neo-brutalist-black);
}

.btn {
  padding: 6px 12px;
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  font-size: 0.8rem;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.edit-button {
  background: var(--neo-brutalist-blue);
  color: var(--neo-brutalist-white);
}

.delete-button {
  background: var(--neo-brutalist-red);
  color: var(--neo-brutalist-white);
}

/* 表单样式 */
.diary-form {
  background-color: var(--neo-brutalist-white);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 4px 4px 0 0 var(--neo-brutalist-black);
  position: relative;
  border: 2px solid var(--neo-brutalist-black);
}

.diary-form h2 {
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  margin-top: 0;
  text-align: center;
  border-bottom: 2px solid var(--neo-brutalist-black);
  padding-bottom: 10px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.neo-brutalist-input {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  background-color: var(--neo-brutalist-white);
  font-size: 1rem;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  font-family: 'Roboto Mono', monospace;
}

.current-time {
  font-size: 1.2rem;
  font-weight: bold;
  color: #000;
  text-align: center;
  background-color: var(--neo-brutalist-white);
  padding: 10px;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.mood-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mood-option {
  flex: 1;
  min-width: 80px;
  padding: 10px;
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  background-color: var(--neo-brutalist-white);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

.mood-option.selected {
  background-color: var(--neo-brutalist-yellow);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.mood-emoji {
  display: block;
  font-size: 1.5rem;
}

.mood-label {
  display: block;
  font-size: 0.8rem;
  margin-top: 5px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
}

.tags-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.remove-tag {
  background: var(--neo-brutalist-red);
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neo-brutalist-white);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.media-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.media-item {
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 5px;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

.media-item img,
.media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
}

.remove-media {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--neo-brutalist-red);
  color: white;
  border: 2px solid var(--neo-brutalist-black);
  width: 24px;
  height: 24px;
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.file-upload-area {
  text-align: center;
  padding: 20px;
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  background-color: var(--neo-brutalist-white);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

.upload-button {
  background: var(--neo-brutalist-blue);
  color: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  padding: 10px 20px;
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 20px;
}

.save-button {
  background: var(--neo-brutalist-green);
  color: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  padding: 12px 25px;
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.cancel-button {
  background: var(--neo-brutalist-red);
  color: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  padding: 12px 25px;
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
  background-color: var(--neo-brutalist-white);
  padding: 15px;
  border-radius: 8px;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 4px 4px 0 0 var(--neo-brutalist-black);
}

.list-header h2 {
  margin: 0;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
}

.list-controls {
  display: flex;
  gap: 10px;
  flex: 1;
  max-width: 500px;
}

.search-input,
.mood-filter {
  padding: 10px;
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  background-color: var(--neo-brutalist-white);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

.loading,
.no-diaries {
  text-align: center;
  padding: 40px;
  color: #000;
  font-style: italic;
}

/* 日记列表动画 */
.diary-list-enter-active,
.diary-list-leave-active {
  transition: all 0.5s ease;
}

.diary-list-enter-from {
  opacity: 0;
  transform: translateY(30px) rotate(5deg);
}

.diary-list-leave-to {
  opacity: 0;
  transform: translateY(-30px) rotate(-5deg);
}

.diary-list-move {
  transition: transform 0.5s ease;
}

@media (max-width: 768px) {
  .scrapbook-pages {
    gap: 20px;
  }
  
  .scrapbook-page {
    width: 100%;
    max-width: 300px;
    height: auto;
    min-height: 300px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .page-actions {
    flex-direction: column;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .list-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .list-controls {
    width: 100%;
  }
  
  .mood-selector {
    justify-content: center;
  }
}
</style>